var category = [
  {
    name: "管控",
    value: 2500,
  },
  {
    name: "集中式",
    value: 8000,
  },
  {
    name: "纳管",
    value: 3000,
  },
  {
    name: "纳管",
    value: 3000,
  },
  {
    name: "纳管",
    value: 3000,
  },
]; // 类别
var total = 10000; // 数据总数
var datas = [];
category.forEach((value) => {
  datas.push(value.value);
});
option = {
  backgroundColor: "#071347",
  xAxis: {
    max: total,
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  grid: {
    left: 80,
    top: 20, // 设置条形图的边距
    right: 80,
    bottom: 20,
  },
  yAxis: [
    {
      type: "category",
      inverse: false,
      data: category,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
  ],
  series: [
    {
      // 内
      type: "bar",
      barWidth: 18,

      legendHoverLink: false,
      silent: true,
      itemStyle: {
        normal: {
          color: function (params) {
            var color;
            if (params.dataIndex == 19) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#EB5118", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#F21F02", // 100% 处的颜色
                  },
                ],
              };
            } else if (params.dataIndex == 18) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFA048", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#B25E14", // 100% 处的颜色
                  },
                ],
              };
            } else if (params.dataIndex == 17) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#F8E972", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#E5C206", // 100% 处的颜色
                  },
                ],
              };
            } else {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1588D1", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0F4071", // 100% 处的颜色
                  },
                ],
              };
            }
            return color;
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: "left",
          formatter: "{b}",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
      },
      data: category,
      z: 1,
      animationEasing: "elasticOut",
    },
    {
      // 分隔
      type: "pictorialBar",
      itemStyle: {
        normal: {
          color: "#061348",
        },
      },
      symbolRepeat: "fixed",
      symbolMargin: 6,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [1, 21],
      symbolPosition: "start",
      symbolOffset: [1, -1],
      symbolBoundingData: this.total,
      data: category,
      z: 2,
      animationEasing: "elasticOut",
    },
    {
      // 外边框
      type: "pictorialBar",
      symbol: "rect",
      symbolBoundingData: total,
      itemStyle: {
        normal: {
          color: "none",
        },
      },
      label: {
        normal: {
          formatter: (params) => {
            var text;
            if (params.dataIndex == 1) {
              text = "{a|  100%}{f|  " + params.data + "}";
            } else if (params.dataIndex == 2) {
              text = "{b|  100%}{f|  " + params.data + "}";
            } else if (params.dataIndex == 3) {
              text = "{c|  100%}{f|  " + params.data + "}";
            } else {
              text = "{d|  100%}{f|  " + params.data + "}";
            }
            return text;
          },
          rich: {
            a: {
              color: "red",
            },
            b: {
              color: "blue",
            },
            c: {
              color: "yellow",
            },
            d: {
              color: "green",
            },
            f: {
              color: "#ffffff",
            },
          },
          position: "right",
          distance: 0, // 向右偏移位置
          show: true,
        },
      },
      data: datas,
      z: 0,
      animationEasing: "elasticOut",
    },
    {
      name: "外框",
      type: "bar",
      barGap: "-120%", // 设置外框粗细
      data: [
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
        total,
      ],
      barWidth: 25,
      itemStyle: {
        normal: {
          color: "transparent", // 填充色
          barBorderColor: "#1C4B8E", // 边框色
          barBorderWidth: 1, // 边框宽度
          // barBorderRadius: 0, //圆角半径
          label: {
            // 标签显示位置
            show: false,
            position: "top", // insideTop 或者横向的 insideLeft
          },
        },
      },
      z: 0,
    },
  ],
};
